<template>
  <div class="user">
    <div class="header">
      <div class="iocnImg">
        <van-icon name="chat-o" size="25" class="chat" />
        <van-icon name="setting-o" size="25" class="setting" />
      </div>
      <div class="details">
        <van-image
          class="vanimg"
          round
          width="4rem"
          height="4rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <span>一如既往</span>
        <span> <van-icon class="gem" name="gem-o" />PLUS </span>
        <span>金牌</span>
        <span>
          京东值11683
          <van-icon name="arrow" size="12px" />
        </span>
        <span>
          小白信用97.9
          <van-icon name="arrow" size="12px" />
        </span>
      </div>
      <div class="dynamic">
        <ul>
          <li>
            <p>65</p>
            <span>商品关注</span>
          </li>
          <li>
            <p>207</p>
            <span>店铺关注</span>
          </li>
          <li>
            <p>268</p>
            <span>收藏物品</span>
          </li>
          <li>
            <p>100</p>
            <span>浏览记录</span>
          </li>
        </ul>
      </div>
      <div class="plusVip">
        <p>PLUS会员</p>
        <p>|</p>
        <p>已为您节省591元</p>
        <p>
          立即查看
        </p>
      </div>

      <van-grid :border="false" :column-num="5" class="grids">
        <van-grid-item icon="peer-pay" text="待付款" />
        <van-grid-item icon="sign" text="待收货" />
        <van-grid-item icon="credit-pay" text="待评价" />
        <van-grid-item icon="cash-on-deliver" text="退换/售后" />
        <van-grid-item icon="paid" color="#F6390D" text="我的订单" />
      </van-grid>
      <van-grid :border="false" :column-num="5" class="grid">
        <van-grid-item icon="peer-pay">
          <h4>760</h4>
          <p>京豆</p>
          <p>签到领京豆</p>
        </van-grid-item>
        <van-grid-item icon="sign">
          <h4>760</h4>
          <p>优惠卷</p>
        </van-grid-item>
        <van-grid-item icon="credit-pay">
          <h4>76.00</h4>
          <p>白条</p>
          <p>最12期免息</p>
        </van-grid-item>
        <van-grid-item icon="cash-on-deliver">
          <h4>76.00</h4>
          <p>京东小金库</p>
          <p>红包天天领</p>
        </van-grid-item>
        <van-grid-item icon="paid" color="#F6390D" text="我的钱包" />
      </van-grid>
      <div class="content">
        <h3>工作与服务</h3>
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <van-image
              width="3rem"
              height="3rem"
              round
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <span>客户服务</span>
          </van-grid-item>
          <van-grid-item>
            <van-image
              width="3rem"
              height="3rem"
              round
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <span>寄件服务</span>
          </van-grid-item>
          <van-grid-item>
            <van-image
              width="3rem"
              height="3rem"
              round
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <span>主题换肤</span>
          </van-grid-item>
          <van-grid-item>
            <van-image
              width="3rem"
              height="3rem"
              round
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <span>闲置管家</span>
          </van-grid-item>
        </van-grid>
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <van-image
              width="3rem"
              height="3rem"
              round
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <span>问医生</span>
          </van-grid-item>
          <van-grid-item>
            <van-image
              width="3rem"
              height="3rem"
              round
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <span>我的预约</span>
          </van-grid-item>
          <van-grid-item>
            <van-image
              width="3rem"
              height="3rem"
              round
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <span>我的试用</span>
          </van-grid-item>
          <van-grid-item>
            <van-image
              width="3rem"
              height="3rem"
              round
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <span>更多</span>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="like">
        <van-icon name="like-o" color="red" />
        <span style="font-size: 15px;color: #000000;">为你推荐</span>
      </div>
      <van-tabs class="tabs">
        <van-tab title="手机" size="20px">
          <van-grid
            :border="false"
            :column-num="1"
            style=" height: 200px;  width:200px;"
          >
            <van-grid-item>
              <van-image
                style=" height: 150px;  width: 150px;"
                src="https://img.yzcdn.cn/vant/apple-1.jpg"
              />
              <span style="font-size: 18px;color:red">IPhone 11 Pro Max</span>
              <span>￥</span>
              <h4>7900</h4>
            </van-grid-item>
            <!-- <van-grid-item>
              <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
            </van-grid-item> -->
          </van-grid>
        </van-tab>
        <van-tab title="电脑">内容 2</van-tab>
        <van-tab title="耳机">内容 3</van-tab>
        <van-tab title="配件">内容 4</van-tab>
        <van-tab title="科技">内容 3</van-tab>
        <van-tab title="体育">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style>
.header {
  height: 240px;
  background: #ebc344;
}
.iocnImg {
  height: 32px;
}
.chat {
  float: right;
  margin-top: 10px;
}
.setting {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}
.details {
  height: 90px;
  position: relative;
}
.vanimg {
  margin-top: 16px;
  margin-left: 18px;
}
.gem {
  margin-top: 3px;
}
.details span:nth-child(2) {
  position: absolute;
  top: 25px;
  left: 100px;
  color: #000000;
  font-size: 18px;
}
.details span:nth-child(3) {
  background: #2c386a;
  color: white;
  width: 63px;
  height: 23px;
  text-align: center;
  position: absolute;
  top: 25px;
  left: 190px;
  line-height: 23px;
}
.details span:nth-child(4) {
  background: #c6a94d;
  color: white;
  width: 33px;
  height: 23px;
  text-align: center;
  line-height: 23px;
  position: absolute;
  top: 25px;
  left: 260px;
}
.details span:nth-child(5) {
  background: #f9de8f;
  color: #000000;
  width: 110px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  position: absolute;
  top: 55px;
  border-radius: 20px;
}
.details span:nth-child(6) {
  background: #f9de8f;
  color: #000000;
  width: 113px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  position: absolute;
  top: 55px;
  right: 55px;
  border-radius: 20px;
}

.dynamic ul {
  display: flex;
  justify-content: center;
  margin-left: 15px;
}
.dynamic li {
  /* display: flex; */
  justify-content: center;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin-right: 25px;
  width: 65px;
  height: 45px;
}
.dynami ul li span {
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
}
.dynamic p {
  font-size: 18px;
  color: #000000;
}

.dynami {
  font-size: 18 px;
}
.plusVip {
  width: 328px;
  height: 53px;
  background: #2c386a;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
}
.plusVip :nth-child(1) {
  color: #d5c996;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 17px;
}
.plusVip p:nth-child(2) {
  color: #d5c996;
  font-size: 14px;
  margin-left: 15px;
  margin-top: 18px;
}
.plusVip p:nth-child(3) {
  color: #d5c996;
  font-size: 14px;
  margin-left: 15px;
  margin-top: 17px;
}
.plusVip p:nth-child(4) {
  border-radius: 20px;
  font-size: 14px;
  width: 81px;
  height: 25px;
  background: #d5c996;
  text-align: center;
  margin-left: 15px;
  margin-top: 15px;
  line-height: 25px;
}
.grids {
  margin-top: 10px;
}
.grid span {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
}
.grid p {
  text-align: center;
  /* line-height: 30px; */
  font-size: 8px;
  color: #909090;
}

.grid {
  margin-top: 10px;
}
.content {
  width: 100%;
  height: 285px;
}
.content h3 {
  margin-top: 20px;
  margin-left: 15px;
}
.content span {
  font-size: 12px;
  color: #909090;
}
.like {
  height: 18px;
  text-align: center;
  line-height: 18px;
}
.tabs {
  margin-top: 15px;
}
</style>
